<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet" />
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>登机牌</title>
  <style>
    /* Language selector styling */
    .language-selector-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 10001;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 10px 15px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    .language-selector-container label {
      color: #115bb6;
      font-weight: 500;
      margin: 0;
    }

    .language-selector {
      border: 2px solid #e0e0e0;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 13px;
      font-family: "Rubik", sans-serif;
      background: white;
      color: #333;
      cursor: pointer;
      transition: border-color 0.3s ease;
    }

    .language-selector:focus {
      outline: none;
      border-color: #115bb6;
    }

    @media (max-width: 768px) {
      .language-selector-container {
        position: relative;
        top: auto;
        right: auto;
        margin: 0 auto 20px auto;
        justify-content: center;
        width: fit-content;
      }
    }

    /* For very small screens like iPhone SE */
    @media (max-width: 400px) {
      .language-selector-container {
        position: relative;
        top: auto;
        right: auto;
        margin: 10px auto 20px auto;
        max-width: 90%;
        flex-direction: column;
        gap: 5px;
        text-align: center;
        width: fit-content;
      }
      
      .language-selector {
        width: 100%;
        min-width: 200px;
      }
    }
  </style>
  <!-- 内嵌CSS样式 -->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    :root {
      font-size: 62.5%;
    }

    body {
      font-size: 1.6rem;
      font-family: "Rubik", sans-serif;
      letter-spacing: -0.02em;
      background: linear-gradient(167.96deg, #115bb6 0%, #271a45 100%) no-repeat fixed;

      height: 100vh;
      display: grid;
      place-content: center;
    }

    .grid {
      display: grid;
    }

    .column {
      grid-auto-flow: column;
    }

    .text-right {
      text-align: right;
    }

    h1,
    strong {
      font-weight: 500;
    }

    h1 {
      font-size: 2rem;
      line-height: 1.4rem;
      color: white;
      text-align: center;
    }

    p {
      color: rgba(0, 0, 0, 0.64);
      font-size: 14px;
      line-height: 17px;
    }

    strong {
      color: rgba(0, 0, 0, 0.88);
      font-size: 16px;
      line-height: 19px;
    }

    section {
      padding: 2.4rem 3.2rem;
      background-color: white;
      border-radius: 2.4rem;

      box-shadow: 0 4rem 2.4rem rgba(0, 0, 0, 0.25);

      -webkit-mask: var(--mask);
      mask: var(--mask);
    }

    #bording-pass {
      /* max-width: 34.7rem; */
      margin-top: 4rem;
    }

    #ticket {
      margin-top: 2rem;
    }

    .top {
      gap: 2.4rem;
    }

    .departure,
    .arrival {
      width: 12.5rem;
    }

    .departure strong,
    .arrival strong {
      font-size: 40px;
      line-height: 47px;
    }

    .airplane {
      align-self: center;
    }

    .airplane img {
      object-fit: contain;
      /* 确保图片内容完整显示 */
    }

    .airplane .square {
      width: 3.2rem;
      height: 3.2rem;
    }

    .airplane .rectangle {
      width: 6rem;
      height: 3.2rem;
    }

    .top time {
      color: rgba(0, 0, 0, 0.8);
    }

    .middle {
      border: 1px dashed rgba(0, 0, 0, 0.32);
      border-left: 0;
      border-right: 0;

      --mask: radial-gradient(1.2rem at 1.2rem 1.2rem, #0000 93%, black) -1.2rem -1.2rem;
    }

    .top time sup {
      font-weight: 500;
      font-size: 10px;
      line-height: 12px;
    }

    .bottom {
      --mask: radial-gradient(1.2rem at 1.2rem 1.2rem, #0000 93%, black) -1.2rem -1.2rem;

      -webkit-mask-repeat: repeat-x;
      mask-repeat: repeat-x;
    }

    .bottom .container {
      align-items: center;
      gap: 0.8rem;
    }

    dl .grid {
      gap: 1.6rem;
      min-width: 9.5rem;
    }

    dt time {
      color: white;
      font-weight: 500;
      font-size: 1.6rem;
      line-height: 1.9rem;
      background: #115bb6;
      border-radius: 0.8rem;
      padding: 0.4rem 0.8rem;
      display: inline-block;
      margin-top: 0.2rem;
    }

    .bottom>p {
      text-align: center;
      margin-top: 2.4rem;
      color: rgba(0, 0, 0, 0.8);
      font-size: 1.6rem;
      line-height: 2rem;
    }

    .qrcode.grid {
      justify-items: center;
    }

    #qrcode {
      padding-bottom: 10px;
      justify-items: center;
    }

    footer {
      font-size: 1.4rem;
      line-height: 2.4rem;
      color: #ffff;
      opacity: 0.64;
      width: 27rem;
      text-align: center;
      margin: 1rem auto;
    }


    /* 自定义美观模态框 - SweetAlert2 风格 */
    .swal2-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      z-index: 10000;
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .swal2-backdrop.show {
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
    }

    .swal2-popup {
      background: white;
      border-radius: 15px;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
      max-width: 800px;
      width: 90%;
      max-height: 90vh;
      overflow: hidden;
      transform: scale(0.7);
      transition: transform 0.3s ease;
      font-family: "Rubik", sans-serif;
    }

    .swal2-backdrop.show .swal2-popup {
      transform: scale(1);
    }

    .swal2-header {
      padding: 30px 30px 20px;
      text-align: center;
      border-bottom: 1px solid #f0f0f0;
    }

    .swal2-title {
      color: #115bb6;
      font-size: 1.8rem;
      font-weight: 500;
      margin: 0;
    }

    .swal2-content {
      padding: 20px 30px;
      max-height: 60vh;
      overflow-y: auto;
    }

    .boarding-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      text-align: left;
    }

    .form-group {
      display: flex;
      flex-direction: column;
    }

    .form-group.full-width {
      grid-column: 1 / -1;
    }

    .form-group label {
      font-size: 0.9rem;
      font-weight: 500;
      margin-bottom: 5px;
      color: #333;
    }

    .form-group input {
      padding: 10px 15px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 0.9rem;
      font-family: "Rubik", sans-serif;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .form-group input:focus {
      outline: none;
      border-color: #115bb6;
      box-shadow: 0 0 0 3px rgba(17, 91, 182, 0.1);
    }

    .form-group input::placeholder {
      color: #999;
    }

    .swal2-actions {
      padding: 20px 30px 30px;
      display: flex;
      gap: 15px;
      justify-content: center;
      border-top: 1px solid #f0f0f0;
    }

    .swal2-button {
      padding: 12px 25px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 500;
      font-family: "Rubik", sans-serif;
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 120px;
    }

    .swal2-confirm {
      background: linear-gradient(135deg, #115bb6, #0f4a95);
      color: white;
    }

    .swal2-confirm:hover {
      background: linear-gradient(135deg, #0f4a95, #0d3e7d);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(17, 91, 182, 0.3);
    }

    .swal2-cancel {
      background: #f8f9fa;
      color: #6c757d;
      border: 2px solid #e9ecef;
    }

    .swal2-cancel:hover {
      background: #e9ecef;
      color: #495057;
      transform: translateY(-2px);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .boarding-form {
        grid-template-columns: 1fr;
      }
      
      .swal2-popup {
        width: 95%;
        margin: 20px;
      }
      
      .swal2-actions {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>
  <div id="bording-pass">
    <h1 data-i18n="title">电子登机牌</h1>
    <main id="ticket">
      <section class="top grid">
        <div class="flight grid column">
          <div class="number">
            <p><span data-i18n="flightNumber">航班号</span> FLIGHT NO.</p>
            <strong id="flightNumber"></strong>
          </div>
          <div class="date text-right">
            <p><span data-i18n="flightDate">航班日期</span> FLIGHT DATE</p>
            <strong id="flightDate"></strong>
          </div>
        </div>
        <div class="grid column">
          <div class="departure grid">
            <p id="departureAirportName"></p>
            <strong id="departureAirport"></strong>
            <time id="departureTime"></time>
          </div>
          <div class="airplane grid">
            <img class="rectangle" id="airlineLogo" src="img/cz.svg" />
          </div>
          <div class="arrival text-right grid">
            <p id="arrivalAirportName"></p>
            <strong id="arrivalAirport"></strong>
            <time id="arrivalTime"><sup></sup></time>
          </div>
        </div>
      </section>
      <section class="middle grid column">
        <div class="name">
          <p id="passengerMemberID"></p>
          <strong id="passengerName"></strong>
        </div>
        <div class="seat text-right">
          <p id="ticketNumber"></p>
          <strong id="passengerMember"></strong>
        </div>
      </section>
      <section class="bottom">
        <div class="container grid column">
          <dl class="grid">
            <dt>
              <p><span data-i18n="boardingTime">登机时间</span> <span data-i18n="boardingTimeShort">BOD.TIME</span></p>
              <time id="boardingTime"></time>
            </dt>
            <dt>
              <p><span data-i18n="class">舱位</span> <span data-i18n="classShort">CLASS</span></p>
              <strong id="compartmentCode"></strong>
            </dt>
            <dt>
              <p><span data-i18n="seat">座位号</span> <span data-i18n="seatShort">SEAT</span></p>
              <strong id="seatNumber"></strong>
            </dt>
            <dt>
              <p><span data-i18n="gate">登机口</span> <span data-i18n="gateShort">GATE</span></p>
              <strong id="gate"></strong>
            </dt>
          </dl>

          <div class="qrcode grid">
            <div id="qrcode" alt="二维码图片"></div>
            <p data-i18n="qrCodeLabel">乘机二维码</p>
          </div>
        </div>
        <p><span data-i18n="boardingNumber">登机序号</span> <span data-i18n="boardingNumberShort">BOD.NO.</span> <strong id="checkInSequenceNumber"></strong></p>
      </section>
    </main>
    <footer>
      <span data-i18n="footer">请注意登机口临时变更信息，登机闸口于起飞前20分钟关闭。</span><br /><span id="footer-english" data-i18n="footerEnglish">Please note that the boarding gate may change. The boarding gate closes 20
      minutes before departure.</span>
    </footer>
  </div>
</body>
<script src="js/i18n.js"></script>
<script src="js/bcbp.min.js"></script>
<script src="js/qrcode.min.js"></script>
<script type="text/javascript">
  // 获取网页参数
  function getQueryVariable(variable) {
    // 从当前页面的 URL 中获取查询字符串，并去掉开头的问号
    var query = window.location.search.substring(1);
    // 将查询字符串按 & 分割成多个键值对
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      // 将每个键值对按 = 分割成键和值
      var pair = vars[i].split("=");
      if (pair[0] === variable) {
        // 如果键匹配，对值进行解码并返回
        return pair.length > 1 ? decodeURIComponent(pair[1]) : null;
      }
    }
    return null;
  }

  //跳转到新的 URL (保留用于兼容性)
  function redirectToNewURL() {
    // 这个函数现在主要通过 SweetAlert2 调用
    showModal();
  }

  // 保留用于兼容性的空函数
  function getInputValues() {
    return {};
  }


  // 自定义 SweetAlert2 风格的模态框实现
  const Swal = {
    fire: function(options) {
      return new Promise((resolve) => {
        // 创建模态框 HTML
        const backdropHtml = `
          <div class="swal2-backdrop" id="swal2-backdrop">
            <div class="swal2-popup">
              <div class="swal2-header">
                <h2 class="swal2-title">${options.title || ''}</h2>
              </div>
              <div class="swal2-content">
                ${options.html || options.text || ''}
              </div>
              <div class="swal2-actions">
                ${options.showCancelButton ? `<button class="swal2-button swal2-cancel" id="swal2-cancel">${options.cancelButtonText || '取消'}</button>` : ''}
                ${!options.timer ? `<button class="swal2-button swal2-confirm" id="swal2-confirm">${options.confirmButtonText || '确定'}</button>` : ''}
              </div>
            </div>
          </div>
        `;

        // 添加到页面
        document.body.insertAdjacentHTML('beforeend', backdropHtml);
        const backdrop = document.getElementById('swal2-backdrop');
        const confirmBtn = document.getElementById('swal2-confirm');
        const cancelBtn = document.getElementById('swal2-cancel');

        // 显示动画
        setTimeout(() => {
          backdrop.classList.add('show');
        }, 10);

        // 关闭模态框函数
        const closeModal = (isConfirmed = false, result = null) => {
          backdrop.classList.remove('show');
          setTimeout(() => {
            backdrop.remove();
          }, 300);
          resolve({
            isConfirmed: isConfirmed,
            value: result,
            dismiss: isConfirmed ? null : 'cancel'
          });
        };

        // 绑定事件
        if (confirmBtn) {
          confirmBtn.addEventListener('click', () => {
            if (options.preConfirm) {
              const result = options.preConfirm();
              closeModal(true, result);
            } else {
              closeModal(true);
            }
          });
        }

        if (cancelBtn) {
          cancelBtn.addEventListener('click', () => {
            closeModal(false);
          });
        }

        // 注释掉点击背景关闭功能，用户必须通过按钮操作
        // backdrop.addEventListener('click', (e) => {
        //   if (e.target === backdrop) {
        //     closeModal(false);
        //   }
        // });

        // ESC 键关闭
        const handleEsc = (e) => {
          if (e.key === 'Escape') {
            closeModal(false);
            document.removeEventListener('keydown', handleEsc);
          }
        };
        document.addEventListener('keydown', handleEsc);

        // 如果有定时器，自动关闭
        if (options.timer) {
          setTimeout(() => {
            closeModal(false);
          }, options.timer);
        }
      });
    },

    close: function() {
      const backdrop = document.getElementById('swal2-backdrop');
      if (backdrop) {
        backdrop.classList.remove('show');
        setTimeout(() => {
          backdrop.remove();
        }, 300);
      }
    },

    // 添加常用的 dismiss reasons
    DismissReason: {
      cancel: 'cancel',
      backdrop: 'backdrop',
      esc: 'esc'
    }
  };

  // 操作弹窗 - 使用自定义的 SweetAlert2 风格模态框
  function showModal() {
    // Wait for i18n to be ready
    if (typeof i18nManager === 'undefined' || !i18nManager) {
      setTimeout(showModal, 100);
      return;
    }

    const translations = i18nManager.getModalTranslations();
    
    Swal.fire({
      title: translations.title,
      html: `
        <div class="boarding-form">
          <div class="form-group">
            <label for="swal-inputPassengerName">${translations.fields.passengerName}</label>
            <input type="text" id="swal-inputPassengerName" placeholder="${translations.placeholders.passengerName}" />
          </div>
          <div class="form-group">
            <label for="swal-inputTicketNumber">${translations.fields.ticketNumber}</label>
            <input type="text" id="swal-inputTicketNumber" placeholder="${translations.placeholders.ticketNumber}" />
          </div>
          <div class="form-group">
            <label for="swal-inputOperatingCarrierPNR">${translations.fields.pnr}</label>
            <input type="text" id="swal-inputOperatingCarrierPNR" placeholder="${translations.placeholders.pnr}" />
          </div>
          <div class="form-group">
            <label for="swal-inputPassengerMemberID">${translations.fields.memberID}</label>
            <input type="text" id="swal-inputPassengerMemberID" placeholder="${translations.placeholders.memberID}" />
          </div>
          <div class="form-group">
            <label for="swal-inputPassengerMember">${translations.fields.memberLevel}</label>
            <input type="text" id="swal-inputPassengerMember" placeholder="${translations.placeholders.memberLevel}" />
          </div>
          <div class="form-group">
            <label for="swal-inputOperatingCarrierDesignator">${translations.fields.carrierCode}</label>
            <input type="text" id="swal-inputOperatingCarrierDesignator" placeholder="${translations.placeholders.carrierCode}" />
          </div>
          <div class="form-group">
            <label for="swal-inputFlightNumber">${translations.fields.flightNumberDigits}</label>
            <input type="text" id="swal-inputFlightNumber" placeholder="${translations.placeholders.flightNumberDigits}" />
          </div>
          <div class="form-group">
            <label for="swal-inputFlightDate">${translations.fields.flightDate}</label>
            <input type="date" id="swal-inputFlightDate" />
          </div>
          <div class="form-group">
            <label for="swal-inputDepartureAirport">${translations.fields.departureAirport}</label>
            <input type="text" id="swal-inputDepartureAirport" placeholder="${translations.placeholders.departureAirport}" />
          </div>
          <div class="form-group">
            <label for="swal-inputDepartureAirportName">${translations.fields.departureAirportName}</label>
            <input type="text" id="swal-inputDepartureAirportName" placeholder="${translations.placeholders.departureAirportName}" />
          </div>
          <div class="form-group">
            <label for="swal-inputDepartureTime">${translations.fields.departureTime}</label>
            <input type="time" id="swal-inputDepartureTime" />
          </div>
          <div class="form-group">
            <label for="swal-inputArrivalAirport">${translations.fields.arrivalAirport}</label>
            <input type="text" id="swal-inputArrivalAirport" placeholder="${translations.placeholders.arrivalAirport}" />
          </div>
          <div class="form-group">
            <label for="swal-inputArrivalAirportName">${translations.fields.arrivalAirportName}</label>
            <input type="text" id="swal-inputArrivalAirportName" placeholder="${translations.placeholders.arrivalAirportName}" />
          </div>
          <div class="form-group">
            <label for="swal-inputArrivalTime">${translations.fields.arrivalTime}</label>
            <input type="time" id="swal-inputArrivalTime" />
          </div>
          <div class="form-group">
            <label for="swal-inputArrivalDayOffset">${translations.fields.arrivalDayOffset}</label>
            <input type="text" id="swal-inputArrivalDayOffset" placeholder="${translations.placeholders.arrivalDayOffset}" />
          </div>
          <div class="form-group">
            <label for="swal-inputBoardingTime">${translations.fields.boardingTime}</label>
            <input type="time" id="swal-inputBoardingTime" />
          </div>
          <div class="form-group">
            <label for="swal-inputCompartmentCode">${translations.fields.compartmentCode}</label>
            <input type="text" id="swal-inputCompartmentCode" placeholder="${translations.placeholders.compartmentCode}" />
          </div>
          <div class="form-group">
            <label for="swal-inputSeatNumber">${translations.fields.seatNumber}</label>
            <input type="text" id="swal-inputSeatNumber" placeholder="${translations.placeholders.seatNumber}" />
          </div>
          <div class="form-group">
            <label for="swal-inputGate">${translations.fields.gate}</label>
            <input type="text" id="swal-inputGate" placeholder="${translations.placeholders.gate}" />
          </div>
          <div class="form-group">
            <label for="swal-inputCheckInSequenceNumber">${translations.fields.checkInSequenceNumber}</label>
            <input type="text" id="swal-inputCheckInSequenceNumber" placeholder="${translations.placeholders.checkInSequenceNumber}" />
          </div>
        </div>
      `,
      showCancelButton: true,
      confirmButtonText: translations.buttons.generate,
      cancelButtonText: translations.buttons.useDemo,
      preConfirm: () => {
        return getSwalInputValues();
      }
    }).then((result) => {
      if (result.isConfirmed) {
        // 用户点击了生成按钮
        const inputValues = result.value;
        const url = buildURLFromValues(inputValues);
        window.location.href = url;
      } else if (result.dismiss === 'cancel') {
        // 用户点击了使用演示信息按钮 - 显示成功消息但不重新加载页面
        setTimeout(() => {
          Swal.fire({
            title: translations.demoSuccess.title,
            text: translations.demoSuccess.text,
            timer: 1500
          });
        }, 350); // 等待前一个模态框完全关闭
      }
    });
  }

  function hideModal() {
    Swal.close();
  }

  // 获取 SweetAlert2 输入框的值
  function getSwalInputValues() {
    return {
      passengerName: document.getElementById('swal-inputPassengerName').value,
      ticketNumber: document.getElementById('swal-inputTicketNumber').value,
      operatingCarrierPNR: document.getElementById('swal-inputOperatingCarrierPNR').value,
      passengerMemberID: document.getElementById('swal-inputPassengerMemberID').value,
      passengerMember: document.getElementById('swal-inputPassengerMember').value,
      operatingCarrierDesignator: document.getElementById('swal-inputOperatingCarrierDesignator').value,
      flightNumber: document.getElementById('swal-inputFlightNumber').value,
      flightDate: document.getElementById('swal-inputFlightDate').value,
      departureAirport: document.getElementById('swal-inputDepartureAirport').value,
      departureAirportName: document.getElementById('swal-inputDepartureAirportName').value,
      departureTime: document.getElementById('swal-inputDepartureTime').value,
      arrivalAirport: document.getElementById('swal-inputArrivalAirport').value,
      arrivalAirportName: document.getElementById('swal-inputArrivalAirportName').value,
      arrivalTime: document.getElementById('swal-inputArrivalTime').value,
      arrivalDayOffset: document.getElementById('swal-inputArrivalDayOffset').value,
      boardingTime: document.getElementById('swal-inputBoardingTime').value,
      compartmentCode: document.getElementById('swal-inputCompartmentCode').value,
      seatNumber: document.getElementById('swal-inputSeatNumber').value,
      gate: document.getElementById('swal-inputGate').value,
      checkInSequenceNumber: document.getElementById('swal-inputCheckInSequenceNumber').value
    };
  }

  // 从输入值构建 URL
  function buildURLFromValues(inputValues) {
    let url = window.location.href.split('?')[0];
    for (const key in inputValues) {
      if (inputValues.hasOwnProperty(key)) {
        const value = inputValues[key];
        if (value !== null && value !== undefined && value !== '') {
          url = url + (url.includes('?') ? '&' : '?') + key + '=' + encodeURIComponent(value);
        }
      }
    }
    return url;
  }

  // 如果没有参数，则使用默认值
  function convertToUpperCase(value) {
    if (typeof value === 'string') {
      return value.toUpperCase();
    }
    return value;
  }
  // 标记是否已经显示过模态框
  var hasShownModal = false;
  
  function showModalOnce() {
    if (!hasShownModal) {
      hasShownModal = true;
      // Wait for i18n to be ready before showing modal
      setTimeout(() => {
        showModal();
      }, 500);
    }
    return "HELLO/WORLD";
  }

  var passengerName = getQueryVariable("passengerName") ? convertToUpperCase(getQueryVariable("passengerName")) : showModalOnce(); // 乘客姓名
  var passengerMember = convertToUpperCase(getQueryVariable("passengerMember")) || "CZ ELITE PLUS"; // 乘客会员
  var passengerMemberID = convertToUpperCase(getQueryVariable("passengerMemberID")) || "CZ 0000000000/G"; // 乘客会员ID
  var ticketNumber = getQueryVariable("ticketNumber") || "7840000000000"; // 机票号
  var boardingTime = getQueryVariable("boardingTime") || "10:20"; // 登机时间
  var gate = getQueryVariable("gate") || "A12"; // 登机口
  var operatingCarrierPNR = convertToUpperCase(getQueryVariable("operatingCarrierPNR")) || "ABCDEF"; // 承运人PNR
  var departureAirport = convertToUpperCase(getQueryVariable("departureAirport")) || "PKX"; // 出发机场
  var departureTime = getQueryVariable("departureTime") || "11:00"; // 出发时间
  var departureAirportName = getQueryVariable("departureAirportName") || "北京大兴国际机场"; // 出发机场名称
  var arrivalAirport = convertToUpperCase(getQueryVariable("arrivalAirport")) || "CAN"; // 到达机场
  var arrivalAirportName = getQueryVariable("arrivalAirportName") || "广州白云国际机场"; // 到达机场名称
  var arrivalTime = getQueryVariable("arrivalTime") || "13:00"; // 到达时间
  var arrivalDayOffset = getQueryVariable("arrivalDayOffset"); // 到达日期偏移
  var operatingCarrierDesignator = convertToUpperCase(getQueryVariable("operatingCarrierDesignator")) || "CZ"; // 承运人代码
  var flightNumber = getQueryVariable("flightNumber") || "1234"; // 航班号
  var flightDate = getQueryVariable("flightDate") || "2025.1.1"; // 航班日期
  var compartmentCode = convertToUpperCase(getQueryVariable("compartmentCode")) || "Y"; // 舱位代码
  var seatNumber = convertToUpperCase(getQueryVariable("seatNumber")) || "1A"; // 座位号
  var checkInSequenceNumber = getQueryVariable("checkInSequenceNumber") || "025"; // 值机序号

  // 生成网页内容
  document.getElementById("passengerName").textContent = passengerName;
  document.getElementById("passengerMember").textContent = passengerMember;
  document.getElementById("passengerMemberID").textContent = passengerMemberID;
  document.getElementById("ticketNumber").textContent = ticketNumber;
  document.getElementById("boardingTime").textContent = boardingTime;
  document.getElementById("gate").textContent = gate;
  document.getElementById("departureAirport").textContent = departureAirport;
  document.getElementById("departureTime").textContent = departureTime;
  document.getElementById("departureAirportName").textContent = departureAirportName;
  document.getElementById("arrivalAirport").textContent = arrivalAirport;
  document.getElementById("arrivalAirportName").textContent = arrivalAirportName;
  document.getElementById("arrivalTime").innerHTML = arrivalDayOffset ? arrivalTime + "<sup>" + arrivalDayOffset + "</sup>" : arrivalTime;
  document.getElementById("flightDate").textContent = flightDate;
  document.getElementById("flightNumber").textContent = operatingCarrierDesignator + flightNumber;
  document.getElementById("compartmentCode").textContent = compartmentCode;
  document.getElementById("seatNumber").textContent = seatNumber;
  document.getElementById("checkInSequenceNumber").textContent = checkInSequenceNumber;

  document.getElementById("airlineLogo").src = "img/" + operatingCarrierDesignator.toLowerCase() + ".svg";

  // 生成BCBP数据
  var bcbp = bcbp.encode({
    data: {
      legs: [
        {
          operatingCarrierPNR: operatingCarrierPNR,
          departureAirport: departureAirport,
          arrivalAirport: arrivalAirport,
          operatingCarrierDesignator: operatingCarrierDesignator,
          flightNumber: flightNumber,
          flightDate: flightDate,
          compartmentCode: compartmentCode,
          seatNumber: seatNumber,
          checkInSequenceNumber: checkInSequenceNumber,
          passengerStatus: "1",
        },
      ],
      passengerName: passengerName,
    },
  });
  console.log(bcbp);

  // 生成二维码
  var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: bcbp,
    width: 128,
    height: 128,
    correctLevel: QRCode.CorrectLevel.L
  });    
</script>

</html>